<template>
  <div class="app-container">
    <!-- 上方按钮 -->
    <div>
      <!-- 新增课件按钮和新增试卷按钮 -->
      <el-button type="primary" size="small" @click="addCourse">分配课程</el-button>
      <el-button type="danger" size="small" @click="deleteCourse">批量删除课程</el-button>
      <el-button type="text" size="small">课程数量：{{total2}}</el-button>
    </div>
    <!-- 新增课程弹窗 -->
    <el-dialog title="为该班级分配课程" :visible.sync="addCourseDialogVisible" width="90%">
      <!--查询表单-->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="标题">
          <el-input v-model="courseQuery.title" size="small" clearable placeholder="请输入课程标题" />
        </el-form-item>
        <el-form-item label="工种">
        <el-cascader
          size="small"
          v-model="courseQuery.subjectId"
          :options="typeList"
          placeholder="默认全部"
          :props="{
            value: 'id',
            label: 'courseName',
            children: 'childrenList',
            expandTrigger: 'hover',
          }"
          :show-all-levels="false"
          clearable
        ></el-cascader>
      </el-form-item>
        <el-form-item label="职级">
          <el-select v-model="courseQuery.gradeId" clearable placeholder="默认全部" size="small">
            <el-option v-for="item in gradeList" :key="item.id" :label="item.grade" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="路线">
          <el-select v-model="courseQuery.kind" clearable placeholder="默认全部" size="small">
            <el-option v-for="item in kindList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="courseQuery.type" clearable placeholder="默认全部" size="small">
            <el-option label="理论" value="理论"></el-option>
            <el-option label="实操" value="实操"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" icon="el-icon-search" @click="getAllCourseList()">查询</el-button>
          <el-button type="default" size="small" @click="resetData()">清空</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="allCourseList" v-loading="listLoading" border fit highlight-current-row height="75vh">
        <el-table-column label="序号" width="70" align="center">
          <template slot-scope="scope">
            {{ (page - 1) * limit + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="videoCourse.title" label="标题" />
        <el-table-column label="适用工种" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <!-- {{ scope.row.subjectParent + "-" + scope.row.subject }} -->
            {{ scope.row.subject }}
          </template>
        </el-table-column>
        <el-table-column prop="grade" label="职级" />
        <!-- 学习路线：0-新型学徒，1-重点用工 -->
        <el-table-column prop="videoCourse.kind" label="学习路线">
          <template slot-scope="scope">
            <span v-if="scope.row.videoCourse.kind === '0'">新型学徒</span>
            <span v-else-if="scope.row.videoCourse.kind === '1'">重点用工</span>
            <span v-else-if="scope.row.videoCourse.kind === '2'">技能提升</span>
          </template>
        </el-table-column>
        <!-- 课程类型 type-->
        <el-table-column prop="videoCourse.type" label="课程类型">
        </el-table-column>
        <!-- 简介，溢出隐藏 -->
        <el-table-column prop="videoCourse.description" label="简介" :show-overflow-tooltip="true" />
        <el-table-column prop="videoCourse.lessonNum" label="总课时" />
        <el-table-column label="封面">
          <template slot-scope="scope">
            <img :src="scope.row.videoCourse.cover" width="80" height="50" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="addCourseToClass(scope.row)">添加</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div style="width: 100%; text-align: center; margin-top: 10px">
        <el-pagination @size-change="sizeChange" @current-change="goto" :current-page="page" :page-sizes="[5, 10, 15, 20]"
          :page-size="limit" layout="total, sizes, prev, pager, next, jumper" :total="total" background
          style="float: right">
        </el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addCourseDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCourseDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 课程列表 -->
    <el-table :data="courseList" v-loading="listLoading" border fit highlight-current-row height="75vh"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="subjectName" label="工种" />
      <el-table-column prop="gradeName" label="职级" />
      <!-- 学习路线：0-新型学徒，1-重点用工 -->
      <el-table-column prop="kind" label="学习路线">
        <template slot-scope="scope">
          <span v-if="scope.row.kind === '0'">新型学徒</span>
          <span v-else-if="scope.row.kind === '1'">重点用工</span>
          <span v-else-if="scope.row.kind === '2'">技能提升</span>
        </template>
      </el-table-column>
      <!-- 课程类型 type-->
      <el-table-column prop="type" label="课程类型">
      </el-table-column>
      <!-- 简介，溢出隐藏 -->
      <el-table-column prop="description" label="简介" :show-overflow-tooltip="true" />
      <el-table-column label="封面">
        <template slot-scope="scope">
          <img :src="scope.row.cover" width="80" height="50" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  getClassCourseListByClassId, addClassCourse, deleteClassCourse
} from "@/api/class/classCourse";
import {
  getCourseList, getGrade,
} from "@/api/edu/course";
import { getCategory } from "@/api/classification";
import { mapGetters } from "vuex";

export default {
  name: "classCourse",
  computed: {
    ...mapGetters(["companyId"]),
  },
  data: function () {
    return {
      addCourseDialogVisible: false,
      //课程列表
      courseList: [],
      //所有课程
      allCourseList: [],
      listLoading: false, //表格加载状态
      page: 1, //当前页
      limit: 10, //每页记录数
      total: 0, //总记录数
      courseQuery: { title: "", subjectId: "", gradeId: "" }, //条件封装对象
      typeList: null, //类别列表
      gradeList: null, //职级列表
      kindList: [
        { value: "0", label: "新型学徒" },
        {
          value: "1",
          label: "重点用工",
        },
        {
          value: "2",
          label: "技能提升",
        },
      ], //路线列表
      ids: [], //选中的课程id数组
      classCourseInfo: {
        classId: null,
        companyId: null,
        courseId: null,
        subjectId: null,
        grade: null
      },
      total2: 0,
    }
  },
  created () {
    this.getCourseListById();
  },
  methods: {
    // 获取课程列表
    getCourseListById () {
      getClassCourseListByClassId(this.$route.query.classId).then(res => {
        this.courseList = res.data.res;
        this.total2 = res.data.total;
      })
    },
    // 获取所有课程列表
    getAllCourseList () {
      //console.log(this.courseQuery)
      if (this.courseQuery.subjectId) {
        this.courseQuery.subjectId =
          this.courseQuery.subjectId[this.courseQuery.subjectId.length - 1]; //小类id
      }
      this.listLoading = true
      getCourseList(this.courseQuery,
        this.page,
        this.limit,
        this.companyId).then(res => {
          const data = res.data;
          //console.log(res)
          this.total = data.total;
          this.allCourseList = data.rows;
          this.listLoading = false;
        })
    },
    // 新增课程窗口显示
    addCourse () {
      this.addCourseDialogVisible = true;
      this.getAllCourseList();
      this.getCategoryList(this.companyId);
      this.getGradeList();
    },
    //跳转页面
    goto: function (page) {
      this.page = page;
      this.getAllCourseList();
    },
    //页码大小改变
    sizeChange: function (limit) {
      this.limit = limit;
      this.getAllCourseList();
    },
    //获取类别列表
    getCategoryList () {
      getCategory(0, this.companyId).then((res) => {
        const data = res.data;
        this.typeList = this.deleteChildren(data.resList);
        // console.log(res);
      });
    },
    //删除类别列表中的空childrenList[]
    deleteChildren (arr) {
      let childs = arr;
      for (let i = childs.length; i--; i > 0) {
        if (childs[i].childrenList) {
          if (childs[i].childrenList.length) {
            this.deleteChildren(childs[i].childrenList);
          } else {
            delete childs[i].childrenList;
          }
        }
      }
      return arr;
    },
    //获取职级列表
    getGradeList () {
      getGrade().then((res) => {
        if (res.success) {
          this.gradeList = res.data.resList;
        }
      });
    },
    // 重置搜素
    resetData () {
      //清空的方法
      //表单输入项数据清空
      this.courseQuery = {};
      this.getAllCourseList();
    },

    // 多选框选中数据
    handleSelectionChange (selection) {
      this.ids = selection.map((item) => item.id);
    },

    // 添加选中课程
    addCourseToClass (row) {
      this.classCourseInfo.companyId = row.videoCourse.companyId;
      this.classCourseInfo.classId = this.$route.query.classId;
      this.classCourseInfo.courseId = row.videoCourse.id;
      this.classCourseInfo.subjectId = row.videoCourse.subjectId;
      this.classCourseInfo.grade = row.videoCourse.gradeId;
      addClassCourse(this.classCourseInfo).then(res => {
        console.log(res)
        this.$message({
          type: "success",
          message: "添加成功!",
        });
        this.getCourseListById();
      })
    },

    // 删除选中课程
    deleteCourse () {
      // 提示框
      this.$confirm("确定要删除选中课程吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteClassCourse(this.ids).then(res => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getCourseListById();
          })
        })
    },

  },
};
</script>
